<template>
    <div class="carousel-manage">
      <div class="content">
        <div class="add-section">
          <div class="section-title">添加材料</div>
          <div class="form-content">
            <el-form :model="carouselForm" label-width="80px">
              <el-form-item label="标题：" required>
                <el-input v-model="carouselForm.title" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item label="图片：" required>
                <el-upload
                  class="upload-demo"
                  action="/api/upload"
                  :show-file-list="false"
                  :on-success="handleUploadSuccess"
                  :before-upload="beforeUpload">
                  <el-button type="primary">上传图片</el-button>
                  <div class="preview" v-if="carouselForm.imageUrl">
                    <img :src="carouselForm.imageUrl" alt="预览图">
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">确认添加</el-button>
                <el-button @click="resetForm">清空内容</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
  
        <div class="list-section">
          <div class="section-title">轮播图列表</div>
          <el-table :data="carouselList" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column label="图片" width="180">
              <template #default="scope">
                <img :src="scope.row.imageUrl" class="table-image" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template #default="scope">
                <el-button type="text" @click="deleteCarousel(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CarouselManage',
    data() {
      return {
        carouselForm: {
          title: '',
          imageUrl: ''
        },
        carouselList: [
          {
            title: '美国签证全流程指南',
            imageUrl: 'https://example.com/image1.jpg'
          },
          {
            title: '办理签证记住这几件事就够了',
            imageUrl: 'https://example.com/image2.jpg'
          },
          {
            title: '日本三年签限量特价',
            imageUrl: 'https://example.com/image3.jpg'
          }
        ]
      }
    },
    methods: {
      handleUploadSuccess(res) {
        this.carouselForm.imageUrl = res.url
      },
      beforeUpload(file) {
        const isImage = file.type.startsWith('image/')
        if (!isImage) {
          this.$message.error('只能上传图片文件！')
        }
        return isImage
      },
      submitForm() {
        if (!this.carouselForm.title || !this.carouselForm.imageUrl) {
          this.$message.error('请填写完整信息')
          return
        }
        this.carouselList.unshift({...this.carouselForm})
        this.resetForm()
        this.$message.success('添加成功')
      },
      resetForm() {
        this.carouselForm = {
          title: '',
          imageUrl: ''
        }
      },
      deleteCarousel(row) {
        this.$confirm('确认删除该轮播图吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const index = this.carouselList.indexOf(row)
          this.carouselList.splice(index, 1)
          this.$message.success('删除成功')
        }).catch(() => {})
      }
    }
  }
  </script>
  
  <style scoped>
  .carousel-manage {
    padding: 24px;
    background: #fff;
    border-radius: 8px;
  }
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 20px;
  }
  
  .add-section {
    background: #F9FAFB;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
  }
  
  .form-content {
    max-width: 600px;
  }
  
  .preview {
    margin-top: 10px;
  }
  
  .preview img {
    max-width: 200px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 4px;
  }
  
  .table-image {
    width: 120px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
  }
  
  :deep(.el-table) {
    font-size: 14px;
  }
  
  :deep(.el-table th) {
    background: #F9FAFB;
    color: #374151;
    font-weight: 500;
  }
  
  :deep(.el-table td) {
    color: #6B7280;
  }
  
  :deep(.el-button--text) {
    color: #DC2626;
  }
  
  :deep(.el-button--text:hover) {
    color: #EF4444;
  }
  </style>